<template>
    <div id="add-blog">
      <h2>添加博客</h2>
      <h3 v-if="submited">博客添加成功</h3>
      <form v-if="!submited">
        <label>博客标题</label>
        <input type="text" v-model="blog.title">
        <label>博客内容</label>
        <input type="text" v-model="blog.content"/>

        <div id="checkboxs">
          <label>Java</label>
          <input type="checkbox" value="Java" v-model="blog.categories"/>
          <label>C++</label>
          <input type="checkbox" value="C++" v-model="blog.categories"/>
          <label>Vue.js</label>
          <input type="checkbox" value="Vue.js" v-model="blog.categories"/>
          <label>Python</label>
          <input type="checkbox" value="Python" v-model="blog.categories"/>
          <label>语文</label>
          <input type="checkbox" value="语文" v-model="blog.categories"/>
        </div>

        <label>作者</label>
        <select v-model="blog.author">
          <option v-for="a in authors" @loadstart="">{{a}}</option>
        </select>

        <button v-on:click.prevent="addBlog">Add Blog</button>
      </form>
      <hr />
      <div>

        博客标题:{{blog.title}}   <p />
        博客内容:{{blog.content}}   <p />
        分类 :
        <p v-for="c in blog.categories">{{c}}</p>
        作者 :{{blog.author}}
      </div>
    </div>
</template>

<script>
    export default {
        name: "AddBlog",
      data(){
          return{
            authors:["jack","hanmeimei","李四","wangwu"],
            blog:{
              title:"",
              content :"",
              categories:[],
              author:""
            },
            submited:false
          }
      },
      methods:{
        addBlog:function () {
          this.axios.post("/api/blog/add",{
            title:this.blog.title,
            content:this.blog.content,
            categories:this.blog.categories.join(","),
            author:this.blog.author
          })
            .then((data)=> {
              //alert(data)
              this.submited = true ;
              console.log(data)
            })
        }  
      }
    }
</script>

<style scoped>
  #add-blog * {
    box-sizing: border-box;
  }
  #add-blog {
    margin: 20px auto;
    max-width: 800px;
    padding: 20px;
  }
  label {
    display: block;
    margin: 20px 0 10px;
  }

  input[type=text],textarea,select {
    display: block;
    width: 100%;
    padding: 8px;
  }

  #checkboxs label {
    display: inline-block;
    margin-top: 5px;
  }
  #checkboxs input {
    display: inline-block;
    margin-right: 10px;
  }

  textarea {
    height: 100px;
  }

  button {
    display: block;
    margin: 20px 0;
    background-color: crimson;
    border: 0;
    cursor: pointer;
    padding: 14px ;
    border-radius: 4px;
    font-size: 18px ;
  }

  #preview {
    border:1px solid #ccc;
    padding: 15px;
  }
</style>
